<template>
  <el-dialog ref="zrkUpload" append-to-body :title="title" :width="uploadStyle" :visible.sync="upload.visible" @close="handleClose">

    <!-- 步骤条 -->
    <el-steps :active="upload.active" finish-status="process" simple>
      <el-step title="选择文件" icon="el-icon-circle-plus" />
      <el-step title="导入数据" icon="el-icon-upload" />
      <el-step title="导入结果" icon="el-icon-info" />
    </el-steps>

    <div style="min-height: 380px">
      <!-- 选择文件 -->
      <div v-show="upload.active === 0" class="step-section">
        <div v-if="templateUrl" class="sections">
          <p class="sections-title">一、请按照数据模板的格式准备要导入的数据。
            <span @click="importTemplate">点击下载{{ title }}模板</span>
          </p>
          <p class="sections-tips">提示：请严格按照数据模板导入数据，格式错误会造成导入失败</p>
        </div>
        <div class="sections">
          <p class="sections-title">二、请选择数据重复时的处理方式
            <el-tooltip class="item" effect="dark" content="补全信息请选择覆盖原有数据" placement="right">
              <i class="el-icon-info tips-icon" />
            </el-tooltip>
          </p>
          <p class="sections-tips">
            <el-row>
              <el-col :span="13">
                <el-select v-model="upload.updateSupport" style="width:100%" placeholder="请选择">
                  <el-option v-for="item in dataOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
            </el-row>
          </p>
        </div>
        <div class="sections">
          <p class="sections-title">三、请选择需要导入的文件</p>
          <p class="sections-tips">提示：允许导入{{ accept || '所有类型' }}格式文件</p>
          <p class="sections-tips">
            <el-upload ref="upload" :limit="limit" :accept="accept" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
              <i class="el-icon-upload" />
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </p>
        </div>
      </div>

      <!-- 导入数据中 -->
      <div v-show="upload.active === 1" class="step-status">
        <i class="el-icon-loading svg-upload" />
      </div>

      <!-- 导入数据成功|失败 -->
      <div v-show="upload.active === 3" class="step-status">
        <i :class="[ upload.result ? 'el-icon-success' : 'el-icon-error','svg-upload' ]" :style="{ color: upload.result ? '#67C23A' : '#F56C6C' }" />
        <p>提交{{ upload.result && '成功' || '失败' }}</p>
        <div style="line-height:1.8;" v-html="upload.msg" />
      </div>
    </div>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button v-if="upload.active !== 3" type="primary" :loading="upload.loading" @click="submitFileForm">
        <span>{{ upload.loading && '导入中...' || '导 入' }}</span>
      </el-button>
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
import { importTemplate } from '@/api/system/file'

export default {
  name: 'ZrkUpload',
  props: {
    show: {
      required: true,
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '导入'
    },
    width: {
      type: [String, Number],
      default: 750
    },
    // 导入文件路径
    importUrl: {
      required: true,
      type: String,
      default: ''
    },
    // 下载模板路径
    templateUrl: {
      type: String,
      default: ''
    },
    // 上传文件格式 默认不限制格式
    accept: {
      type: String,
      default: ''
    },
    // 上传文件数量
    limit: {
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      // 默认参数
      upload: {
        // 是否显示弹出层
        visible: this.show,
        // 是否禁用自动上传
        isUploading: false,
        loading: false,
        // 是否更新已经存在的用户数据 默认新增
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + this.importUrl,
        // 步骤条进度
        active: 0,
        // 上传结果
        result: false,
        msg: ''
      },
      // 导入方式选择
      dataOptions: [
        {
          value: 0,
          label: '新增数据'
        },
        {
          value: 1,
          label: '覆盖原有数据'
        }
      ]
    }
  },
  computed: {
    uploadStyle() {
      return this.width ? `${this.width}px` : '750px'
    }
  },
  watch: {
    show: {
      immediate: true,
      handler(val) {
        this.upload.visible = this.show
        this.upload.active = 0
        this.upload.updateSupport = 0
      }
    }
  },
  methods: {
    // 下载模板操作
    importTemplate() {
      importTemplate(this.templateUrl).then((response) => {
        this.download(response.msg)
      })
    },
    // 提交上传文件
    submitFileForm() {
      if (this.$refs.upload.uploadFiles.length === 0) {
        this.$message.error('请至少选择一个文件')
        return
      }
      this.$refs.upload.submit()
      this.upload.loading = true
      this.upload.active = 1
    },
    // 文件上传中
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功
    handleFileSuccess(res, file, fileList) {
      // success 200 error 500
      this.upload.active = 3
      this.upload.loading = false
      this.upload.isUploading = false
      // 上传结果（描述后台返回）
      this.upload.result = res.code === 200
      this.upload.msg = res.msg
    },
    // 关闭 重置数据
    handleClose() {
      if (this.upload.result) {
        this.$emit('close')
      }
      this.$emit('update:show', false)
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style lang="scss" scoped>
$min-height: 380px;

.step-section {
  min-height: $min-height;
  .sections {
    .sections-title {
      font-weight: bold;
      span {
        cursor: pointer;
        color: #409eff;
      }
    }
    .sections-tips {
      font-size: 12px;
      color: #999;
      padding: 0 0 0 29px;
    }
  }
}

.svg-upload {
  font-size: 85px;
}

.step-status {
  min-height: $min-height;
  width: 100%;
  padding: 90px 0 0 0;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;

  p {
    margin: 15px 0 20px 0;
    letter-spacing: 0.5px;
    color: #303133;
    font-size: 22px;
  }
}

.upload-tips {
  cursor: pointer;
  vertical-align: -1px;
  margin-left: 1px;
}

::v-deep .el-dialog__body {
  padding: 16px 24px 24px 24px !important;
}
</style>
